<script setup lang="ts">
import {RouterLink} from 'vue-router'

import TarIcon from "@/components/TarIcon.vue";

function renderIcon(icon: string) {
  return () => h(TarIcon, {icon})
}

const menus_options = [{
  label: 'Dashboard',
  key: 'dashboard',
  icon: renderIcon('dashboard'),
}, {
  label: '博客管理',
  key: 'blog-manager',
  icon: renderIcon('read'),
  children: [
    {
      label: () => h(RouterLink, {to: {name: 'blog-list'}}, {default: () => '博客列表'}),
      key: 'blog-list',
    },
    {
      label: () => h(RouterLink, {to: {name: 'blog-add'}}, {default: () => '新建博客'}),
      key: 'blog-add',
    },
    {
      label: () => h(RouterLink, {to: {name: 'blog-category'}}, {default: () => '博客分类'}),
      key: 'blog-category',
    },
    {
      label: '博客标签',
      key: 'blog-tag',
    },
    {
      label: () => h(RouterLink, {to: {name: 'blog-comment'}}, {default: () => '博客评论'}),
      key: 'blog-comment',
    },
    {
      label: () => h(RouterLink, {to: {name: 'blog-comment'}}, {default: () => '博客评论'}),
      key: 'blog-archive',
    },
  ]
}, {
  label: 'Contact',
  key: 'contact',
  icon: renderIcon('heart'),
}]

const expand = ref(true)

</script>

<template>
  <div class="side-bar" :style="{width:expand ? '200px' : '50px'}">
    <n-menu :options="menus_options" accordion :collapsed="!expand"/>
    <n-button class="opt-x" text @click="expand = !expand">
      <template #icon>
        <tar-icon :icon="expand? 'outdent':'indent'"/>
      </template>
    </n-button>
  </div>

</template>

<style lang="scss" scoped>
.side-bar {
  position: relative;
  transition: width .3s;

  .opt-x {
    position: absolute;
    top: 20px;
    right: -36px;
  }
}
</style>